<template>
  <view class="container">
    <!-- 顶部包含学号和姓名 -->
    <view class="header">
      <text>学号：2531010120144  姓名：韦梦丹</text>
    </view>
    
    <!-- 注册表单 -->
    <view class="form-container">
      <!-- 用户名 -->
      <view class="form-item">
        <text>用户名：</text>
        <input 
          type="text" 
          v-model="username" 
          placeholder="请输入用户名"
          class="input"
        />
      </view>
      
      <!-- 密码 -->
      <view class="form-item">
        <text>密码：</text>
        <input 
          type="password" 
          v-model="password" 
          placeholder="请输入密码"
          class="input"
        />
      </view>
      
      <!-- 性别 -->
      <view class="form-item">
        <text>性别：</text>
        <radio-group v-model="gender">
          <radio value="male" class="radio">男</radio>
          <radio value="female" class="radio">女</radio>
        </radio-group>
      </view>
      
      <!-- 出生日期 -->
      <view class="form-item">
        <text>出生日期：</text>
        <picker 
          mode="date" 
          value="{{ birthday }}" 
          start="1900-01-01" 
          end="2025-12-31"
          @change="onBirthdayChange"
          class="picker"
        >
          <view class="picker-view">
            {{ birthday || '请选择出生日期' }}
          </view>
        </picker>
      </view>
      
      <!-- 注册按钮 -->
      <button 
        type="primary" 
        class="submit-btn"
        @click="handleRegister"
      >
        注册
      </button>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      username: '',    // 用户名
      password: '',    // 密码
      gender: '',      // 性别
      birthday: ''     // 出生日期
    };
  },
  methods: {
    // 处理出生日期选择
    onBirthdayChange(e) {
      this.birthday = e.detail.value;
    },
    // 处理注册提交
    handleRegister() {
      console.log('注册信息：', {
        username: this.username,
        password: this.password,
        gender: this.gender,
        birthday: this.birthday
      });
      // 可以添加表单验证和提交逻辑
    }
  }
};
</script>

<style scoped>
.container {
  padding: 20rpx;
}

.header {
  padding: 20rpx 0;
  border-bottom: 1px solid #eee;
  margin-bottom: 30rpx;
}

.form-container {
  display: flex;
  flex-direction: column;
  gap: 30rpx;
}

.form-item {
  display: flex;
  align-items: center;
  gap: 20rpx;
}

.input {
  flex: 1;
  border: 1px solid #ddd;
  padding: 15rpx;
  border-radius: 4rpx;
}

.radio-group {
  display: flex;
  gap: 30rpx;
}

.picker {
  flex: 1;
}

.picker-view {
  padding: 15rpx;
  border: 1px solid #ddd;
  border-radius: 4rpx;
}

.submit-btn {
  margin-top: 20rpx;
  width: 100%;
}
</style>